<template>
<!-- 组织架构 -->
  <div>
    <!-- 卡片区域 -->
    <el-card>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>校区管理</el-breadcrumb-item>
            <el-breadcrumb-item>组织架构</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 组织 -->
        <div class="organization">
            <span>组织：</span>
            <el-button size="mini" @click="addOrganization">新建组织</el-button>
            <el-button size="mini" @click="renOrganization">重命名</el-button>
            <el-button size="mini" @click="deleteOrganization">删除</el-button>
        </div>
        <!-- 树形控件layui框架 -->
         <div id="test1">

         </div>
         <!-- 新建组织对话框 -->
          <!-- @childFn='parentFn'(父亲接收子传递过来的值) :hiddens='dialogVisible'(子向父传递参数) -->
        <dialogIndex @childFn='parentFn' :hiddens='dialogVisible'>
          <el-form :rules="formrules" ref="formrules" :model="infeform" label-width="100px">
            <el-form-item label="组织名称:" prop="title">
                <el-input v-model="infeform.title"></el-input>
            </el-form-item>
            <el-form-item v-if="ren" label="节点类型:">
                <el-select @change='changeValue' v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in treeData"
                  :key="item.id"
                  :label="item.title"
                  :value="item.title"
                  >
                </el-option>
              </el-select>
            </el-form-item>
        </el-form>
        </dialogIndex>
        <!-- 警告信息 -->
        <el-alert
        v-if="showAlert"
        title="该组织下已经有教师注册，不能删除"
        type="error"
        show-icon
        :closable='false'>
      </el-alert>
    </el-card>
  </div>
</template>

<script>
import dialogIndex from '@/components/commons/Dialog/index.vue'
import {getOrganizationList} from '@/api/user'
export default {
  title: 'organization',
  components:{
    dialogIndex
  },
  data(){
      return{
        treeData:[],
        // 组织架构列表
        OrganizationLists:[],
        // 警告
        showAlert:false,
        // 对话框的基本内容
        dialogVisible:{},
        // 重命名
        ren:true,
        infeform:{
            title:'',
            nodeTypes:'',
        },
        formrules:{
            title: [
                { required: true, message: '请输入组织名称', trigger: 'blur' },
                {min:2,max:15,message:'长度最多为15位',trigger:'blur'}
            ]
        },
        // 节点类型下拉框
        value: ''
      }
  },
  methods:{
    changeValue(value){
      console.log(value)
    },
    // 递归解析tree
    getlist(data){
      if(data.childList && data.childList.length)
       data.childList.forEach(item=>{
            item.children=item.childList
            item.title=item.organizationName
            item.id=item.organizationId
            this.getlist(item);
          })
    },

    // 获取组织架构列表
    getOrganizationLists(){
      getOrganizationList().then(res=>{
        if(res.code==1){
          this.treeData=res.data;
           this.treeData.forEach(item=>{
            item.children=item.childList;
            item.title=item.organizationName;
            item.id=item.organizationId;
            this.getlist(item);
            // if(item.childList && item.childList.length){
            //   this.getlist(item);
            // }
          })
         this.getlist(res.data)
          this.gettTree(this.treeData)
        }
      })
    },
    // 树形控件
      gettTree(data){
          layui.use('tree', function(){
        var tree = layui.tree;
      
        //渲染
        var inst1 = tree.render({
          elem: '#test1',  //绑定元素
          id:'demoId',
          data:data,
            click: function(obj){
        // console.log(obj.data); //得到当前点击的节点数据
        // console.log(obj.state); //得到当前节点的展开状态：open、close、normal
        // console.log(obj.elem); //得到当前节点元素
        // console.log(obj.data.children); //当前节点下是否有子节点
          }
            });
          });
          //获得选中的节点
        // var checkData = tree.getChecked('demoId');
        // console.log(checkData)
      },
      // 点击新建组织按钮
      addOrganization(){
        this.ren=true
        this.dialogVisible={
          // 显示、隐藏对话框
          visible:true,
          title:'新建组织'
        }
      },
      // 点击重命名按钮
      renOrganization(){
        this.ren=false;
        this.dialogVisible={
          // 显示、隐藏对话框
          visible:true,
          title:'重命名'
        }
      },
      // 点击删除按钮
      deleteOrganization(){
        this.$confirm('此操作将删除该组织, 是否继续?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.showAlert=true
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },

      // 关闭并重置表单
      refsClose(){
          this.$refs.formrules.resetFields()
      },
      // 接收子组件传递的值
      parentFn(val){
          if(val=='sub'){
              this.$refs.formrules.validate((valid) => {
                  if(!valid) return;
                  this.$message.success('保存');
                  this.refsClose();
                  this.dialogVisible.okForm=false
              })
              // 重置表单
          }else if(val=='hidden'){
              this.refsClose()
          }
      },
  },
  created(){
      this.getOrganizationLists()
      // this.gettTree()
  }
}
</script>

<style lang="less" scoped>
.organization{
    font-size: 14px;
    margin-bottom: 20px;
}
</style>
